<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <style>
    *{
      margin: 0;
      padding: 0;
    }
    .container{
        float: left;
        width: 100%;
    }
    .text{
      width: 200px;
      height: 150px;
      /* 水平垂直居中 */
      margin: 0 auto;
      border: 1px solid #CCC;
      border-radius: 5px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

    }
    .text center{
        font-size:20px;
        line-height:50px;
    }
    .online{
        display:inline-block;
        width:8px;
        border-radius: 4px;
        line-height: 8px;
        height: 8px;
        background-color: limegreen;
        
    }
    .offline{
        display:inline-block;
        width:8px;
        border-radius: 4px;
        line-height: 8px;
        height: 8px;
        background-color:darkorange;
    }

    .item{
        width:30%;
        height: 100px;
        border: 1px solid #CCC;
        margin: 4px;
        text-align: center;
        float: left;
        background-color: rgba(200,200,200,0.5);
        border-radius: 5px;
        box-shadow: 4px 4px 4px rgba(0,0,0,0.5);
        -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.5);
        -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.5);
    }
    .item .time{
        font-size: 12px;
        color: blue;
    }
    .item .state{
        font-size: 12px;
        height: 20px;
        line-height: 20px;
        color: dodgerblue;
    }
    .item .info{
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        color: #27ba8c;
    }
    .item .title{
        font-weight: bold;
    }
    </style>
</head>
<body>
<div class="container">
    <div id="app" style="width: 100%;">
        <div style="text-align: center;">
            <h2>智能设备</h2>
        </div>

        <div class="item">
            <div class="title">门 
                
                <span v-if="dool.online" class="online"></span>
                <span v-else class="offline"></span>
            </div>
            <div class="state">状态:
                <span v-if="dool.dool.doolValue=='1'">开</span>
                <span v-else >关</span>

            </div>
            <div class="info">电压:
                {{dool.dool.doolbatValue/10.0}} V
            </div>
            <div class="time">{{dool.dool.doolTime}}</div>

        </div>
        <!----   光强  -->
        <div class="item">
            <div class="title" >光强
                <span v-if="dool.online" class="online"></span>
                <span v-else class="offline"></span>
            </div>
            <div class="state" >状态:
                <span v-if="dool.light.lightValue=='1'">强</span>
                <span v-else >弱</span>

            </div>
            <div class="info">电压:
                {{dool.light.lightbatValue/10.0}} V
            </div>
            <div class="time">{{dool.light.lightTime}}</div>
        </div>

        <!----   温度计  -->
        <div class="item">
            <div class="title" >温度计
                <span v-if="dool.online" class="online"></span>
                <span v-else class="offline"></span>
            </div>
            <div class="state" >
                <span>{{dool.temperature.temp}}­°C</span>&nbsp;
                <span>{{dool.temperature.hume}}%</span>

            </div>
            <div class="info">电压:
                {{dool.temperature.bat/10.0}} V
            </div>
            <div class="time">{{dool.temperature.time}}</div>
        </div>

        <!--电脑-->
        <div class="item">
            <div class="title">电脑
                <span v-if="computer.online" class="online"></span>
                <span v-else class="offline"></span>
            </div>
            <div class="state">{{computer.msg}}</div>
            <div class="info">

                <button @click="sendCmd">发送命令</button>
            </div>
            <div class="time">{{computer.time}}</div>
        </div>

    </div>

</div>
<script src="vue.global.js"></script>
<script src="axios.min.js"></script>
<script>
//   new Promise((resolve, reject)=>{
//         axios.get('/devices/933278607',{
//             params:{},
//             headers:{
//                 'api-key':apiKey
//             },
//             withCredentials: true,
//         }).then(res=>{
//                 console.log(res)
//         });
//     });

</script>
<script>
   var httpGet=null;
   var httpPost=null;
   //针对不同平台做出不同的处理,便于本地测试
   if(window.android){
        console.log("----android---");
        httpGet=function(url,callBack){
            //生成函数名称
            let callbackName = `callback_${Date.now()}_${Math.floor(Math.random()*10000)}`;
            function get(url,callBackTemp){
                //设置全局函数
                window[callbackName]=callBackTemp;
                //回调请求
                window.android.httpGetAsync(url,"",callbackName);
            }
            get(url,(res)=>{
                callBack(res);
                //执行完回调函数后，删除函数引用
                window[callbackName]=null;
            });
        }

        httpPost=function(url,param,callBack){
            //生成函数名称
            let callbackName = `callback_${Date.now()}_${Math.floor(Math.random()*10000)}`;
            function get(url,callBackTemp){
                //设置全局函数
                window[callbackName]=callBackTemp;
                //回调请求
                window.android.httpPostAsync(url,param,"",callbackName);
            }
            get(url,(res)=>{
                callBack(res);
                //执行完回调函数后，删除函数引用
                window[callbackName]=null;
            });
        }


   }else{
        console.log("-----web------");
        //开始处理
        httpGet=function(url,callBack){
            //生成函数名称
            function get(url,callBackTemp){
                //设置全局函数
                //回调请求
                //开始发起网络请求
                axios.get('http://127.0.0.1:8181/test/jsonpGet',{
                    params:{url:url},
                }).then(res=>{
                    callBackTemp(res.data);
                });
            }
            get(url,(res)=>{
                callBack(res);
            });
        };

        httpPost=function(url,param,callBack){
            //生成函数名称
            function get(url,callBackTemp){
                //设置全局函数
                //回调请求
                //开始发起网络请求
                axios({
                    method:"post",
                    url:'http://127.0.0.1:8181/test/jsonpPost',
                    data:{url:url,param:param},
                    headers:{
                        'Content-type': 'application/x-www-form-urlencoded'
                    }
                }).then(res=>{
                    callBackTemp(res.data);
                });
            }
            get(url,(res)=>{
                callBack(res);
            });
        };

   }


   //查询设备信息


   const { createApp, ref } = Vue;
   const app={
        data() {
              return {
                message:'hello vue...',
                dool:{
                    online:false,
                    light:{
                        lightbatValue:'',
                        lightbatTime:'',
                        lightValue:'',
                        lightTime:''
                    },
                    dool:{
                        doobatValue:'',
                        doobatTime:'',
                        doolValue:'',
                        doolTime:''
                    },
                    temperature:{
                        temp:0,
                        hume:0,
                        bat:0,
                        time:''
                    }

                },
                computer:{
                    online:false,
                    time:'',
                    msg:'--',
                },
              }
        },
        methods:{
            sendCmd(){
                this.computer.msg="--";
                var cmds='{"f":0.95}';
                httpPost("http://api.heclouds.com/cmds?device_id=925960048",cmds,res=>{
                    if(res.errno==0){
                        this.computer.msg="发送成功";
                    }else{
                        this.computer.msg="发送失败";
                    }
                });
            },

            initMethod(){
                 //获取设备状态(门和光强)
                httpGet("https://api.heclouds.com/devices/933278607",(res)=>{
                    const json=res.data;
                    this.dool.online=json.online;
                });
                //门电池
                httpGet("https://api.heclouds.com/devices/933278607/datastreams/doolbat",(res)=>{
                    const json=res.data;
                    this.dool.dool.doolbatValue=json.current_value;
                    this.dool.dool.doolbatTime=json.update_at;
                });
                //门状态
                httpGet("https://api.heclouds.com/devices/933278607/datastreams/dool",(res)=>{
                    const json=res.data;
                    this.dool.dool.doolValue=json.current_value;
                    this.dool.dool.doolTime=json.update_at;
                });

                //光强电池
                httpGet("https://api.heclouds.com/devices/933278607/datastreams/lightbat",(res)=>{
                    const json=res.data;
                    this.dool.light.lightbatValue=json.current_value;
                    this.dool.light.lightbatTime=json.update_at;
                });

                //光强状态
                httpGet("https://api.heclouds.com/devices/933278607/datastreams/light",(res)=>{
                    const json=res.data;
                    this.dool.light.lightValue=json.current_value;
                    this.dool.light.lightTime=json.update_at;
                });

                //温度信息
                httpGet("https://api.heclouds.com/devices/933278607/datastreams/temperature",(res)=>{
                    const json=res.data;
                    this.dool.temperature.time=json.update_at;
                    var val=json.current_value;
                    var bat=parseInt(val.substr(0,2),16)&0x7c;
                    this.dool.temperature.bat=bat;
                    this.dool.temperature.hume=parseInt(val.substr(2,2),16);
                    this.dool.temperature.temp=parseInt(val.substr(4,2),16);
                });



                //获取电脑状态
                httpGet("https://api.heclouds.com/devices/925960048",(res)=>{
                    const json=res.data;

                    this.computer.online=json.online;
                });

                //光强状态
                httpGet("https://api.heclouds.com/devices/925960048/datastreams/value",(res)=>{
                    const json=res.data;
                    this.computer.time=json.update_at;
                });
            }
        },
        mounted(){
           var that=this;
           this.initMethod();
           //当是手机时候
           if(window.android){
               setInterval(()=>{
                this.initMethod();
               },5000);
           }
        },
  };

  createApp(app).mount('#app')





</script>

</body>
</html>
